const pre_btn = document.querySelector('.pre');
const next_btn = document.querySelector('.next');
const progress_h = document.querySelector('.progress-h');
const circles = document.querySelectorAll('.circle');


// 设置指针
let currentindex = 1;

pre_btn.addEventListener('click',()=>{
    currentindex--;
    if(currentindex < 1){
        currentindex =1;
    }
    update();
});

next_btn.addEventListener('click',()=>{
    currentindex++;
    if(currentindex > circles.length){
        currentindex = circles.length;
    }
    // console.log(currentindex);
    update();
});

function update(){

    circles.forEach((circle,index) => {
        if(index < currentindex){
            circle.classList.add('active');

        }else{
            circle.classList.remove('active');
        }
    });

    //进度条
    const actives = document.querySelectorAll('.active');
    progress_h.style.width = (actives.length-1)/(circles.length-1)*100+'%';

    // 按钮禁用
    if(currentindex===1){
        pre_btn.disabled = true;
    }else if(currentindex===circles.length){
        next_btn.disabled = true;
    }else{
        pre_btn.disabled = false;
        next_btn.disabled = false;
    }

    

}